今天是第九天我們可以寫一個JavaScript 演唱會網頁程式管理系統，以下是我的程式碼
活動管理：
門票管理：
用戶管理：
這是一個基礎的網頁管理系統範例：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演唱會管理系統</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>演唱會管理系統</h1>
<div id="event-form">
<h2>新增演唱會</h2>
<form id="add-event-form">
<label for="event-name">活動名稱：</label>
<input type="text" id="event-name" required><br><br>
<label for="event-date">活動日期：</label>
<input type="date" id="event-date" required><br><br>
<label for="event-location">活動地點：</label>
<input type="text" id="event-location" required><br><br>
<label for="ticket-count">門票數量：</label>
<input type="number" id="ticket-count" required><br><br>
<button type="submit">新增活動</button>
</form>
</div>
<div id="event-list">
<h2>演唱會列表</h2>
<ul id="event-list-ul">
<!-- 動態生成活動列表 -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1, h2 {
text-align: center;
}
#event-form, #event-list {
margin: 20px auto;
padding: 20px;
width: 80%;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
label {
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
margin: 10px 0;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
background-color: #f4f4f4;
margin-bottom: 10px;
border-radius: 4px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
document.getElementById("add-event-form").addEventListener("submit", addEvent);
let eventList = [];
function addEvent(event) {
event.preventDefault();
// 獲取表單資料
let eventName = document.getElementById("event-name").value;
let eventDate = document.getElementById("event-date").value;
let eventLocation = document.getElementById("event-location").value;
let ticketCount = document.getElementById("ticket-count").value;
// 建立新活動物件
let newEvent = {
name: eventName,
date: eventDate,
location: eventLocation,
tickets: ticketCount
};
// 將活動加入活動列表
eventList.push(newEvent);
// 重新渲染活動列表
renderEventList();
// 清空表單
document.getElementById("add-event-form").reset();
}
function renderEventList() {
let eventListUl = document.getElementById("event-list-ul");
eventListUl.innerHTML = ""; // 清空現有列表
// 生成新的活動列表
eventList.forEach((event, index) => {
let li = document.createElement("li");
li.innerHTML = `
<strong>活動名稱：</strong> ${event.name}<br>
<strong>活動日期：</strong> ${event.date}<br>
<strong>活動地點：</strong> ${event.location}<br>
<strong>門票數量：</strong> ${event.tickets}<br>
<button onclick="deleteEvent(${index})">刪除活動</button>
`;
eventListUl.appendChild(li);
});
}
function deleteEvent(index) {
eventList.splice(index, 1); // 從活動列表中移除活動
renderEventList(); // 重新渲染列表
}
addEvent 函數來處理表單提交，新增活動資料到 eventList。renderEventList 用來動態生成活動列表。接下來我會以JavaScript 為主解釋程式碼
document.getElementById("add-event-form").addEventListener("submit", addEvent);
這段程式碼會選取網頁中的表單（透過 getElementById 來獲取），並將一個 "submit" 事件綁定到該表單。當使用者點擊提交按鈕時，addEvent 函數會被呼叫，並執行新增演唱會的邏輯。
let eventList = [];
這是一個用來儲存所有演唱會活動的陣列，每新增一個活動，該活動的資料就會儲存在這個 eventList 陣列中。
function addEvent(event) {
event.preventDefault(); // 阻止表單預設行為（即頁面重新加載）
// 獲取表單中的資料
let eventName = document.getElementById("event-name").value;
let eventDate = document.getElementById("event-date").value;
let eventLocation = document.getElementById("event-location").value;
let ticketCount = document.getElementById("ticket-count").value;
// 建立一個活動物件，包含活動的基本資訊
let newEvent = {
name: eventName,
date: eventDate,
location: eventLocation,
tickets: ticketCount
};
// 將新活動加入活動列表
eventList.push(newEvent);
// 呼叫渲染函數，更新畫面上的活動列表
renderEventList();
// 清空表單的輸入框
document.getElementById("add-event-form").reset();
}
event.preventDefault()：阻止表單的預設提交行為，避免頁面重新加載。這樣可以讓我們使用 JavaScript 來處理表單提交。getElementById().value：抓取使用者在表單中輸入的資料（如活動名稱、日期、地點等）。newEvent：儲存一個活動的所有相關資訊，如名稱、日期、地點和門票數量。這個物件會被加入到 eventList 陣列中。function renderEventList() {
let eventListUl = document.getElementById("event-list-ul");
eventListUl.innerHTML = ""; // 清空目前的列表，防止重複顯示
// 遍歷每個活動，為每個活動建立列表項目
eventList.forEach((event, index) => {
let li = document.createElement("li");
li.innerHTML = `
<strong>活動名稱：</strong> ${event.name}<br>
<strong>活動日期：</strong> ${event.date}<br>
<strong>活動地點：</strong> ${event.location}<br>
<strong>門票數量：</strong> ${event.tickets}<br>
<button onclick="deleteEvent(${index})">刪除活動</button>
`;
eventListUl.appendChild(li);
});
}
innerHTML = ""：每次重新渲染活動列表前，先清空現有的列表，避免重複顯示相同內容。forEach：用來遍歷 eventList 陣列，對每個活動物件進行操作。createElement 和 innerHTML：透過 JavaScript 動態創建 HTML 元素，將活動資訊插入到 <li> 元素中，並將它附加到 <ul> 列表中。deleteEvent(${index})：為每個活動生成一個 "刪除活動" 按鈕，點擊該按鈕會執行 deleteEvent 函數並傳入該活動的索引值。function deleteEvent(index) {
eventList.splice(index, 1); // 從活動列表中刪除指定索引的活動
renderEventList(); // 刪除後重新渲染活動列表
}
splice()：從陣列中刪除指定索引位置的項目，這裡用來從 eventList 中刪除選定的活動。renderEventList，以更新畫面上的活動列表，確保刪除後的活動不再顯示。addEvent 函數會將該活動資訊加入到 eventList 陣列中。renderEventList 會根據 eventList 中的活動，生成並顯示每個活動的詳細資訊，包括名稱、日期、地點、門票數量。deleteEvent 函數負責從列表中移除該活動並重新渲染畫面。這個系統使用了基礎的 JavaScript 操作 DOM 的方法來動態管理演唱會活動，你可以根據需求進一步擴充，如加入購票功能、用戶管理、數據儲存等功能。
iThome鐵人賽
看影片追技術